<template>
    <div class="box">
        <var-sticky :offset-top="0">
            <var-app-bar title="购物车" title-position="center"
                color="linear-gradient(90deg, rgba(72,176,221,1) 0%, rgba(0,208,161,1) 100%)">
                <template #left>
                    <var-button color="transparent" text-color="#fff" round text>
                        <var-icon name="chevron-left" :size="24" @click="onClickLeft" />
                    </var-button>
                </template>
                <template #right>
                    <var-menu>
                        <var-button color="transparent" text-color="#fff" round text>
                            <span @click="onClickRight">{{ !edit ? "编辑" : "完成" }}</span>
                        </var-button>
                    </var-menu>
                </template>

            </var-app-bar>
        </var-sticky>
        <van-checkbox-group v-model="checked" ref="checkboxGroup">
            <van-cell-group inset>
                <van-cell v-for="(item,index) in render" clickable :key="item.name" class="goods-card ">
                    <van-card :price="(item.price * item.number).toFixed(2)" :desc="item.level +' ' + item.color" :title="item.name"
                        :thumb="item.url">

                        <template #footer>
                            <var-counter :min="1" :max="100" v-model="item.number" @update:model-value="handleChange(index,item.number)"
                                color="linear-gradient(90deg, rgba(72,176,221,1) 0%, rgba(0,208,161,1) 100%)" />
                        </template></van-card>
                    <template #right-icon>
                        <van-checkbox :name="item" @click="select" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-checkbox-group>

        <var-divider description="推荐" />

        <div class="recommendList">
            <div class="item" v-for="item in recommendData?.data.recommendList" :key="item.data.goods.itemId">
                <div class="pic">
                    <router-link :to="{ name: 'info', params: { id: item.data.goods.itemId } }">
                        <img :src="item.data.goods.img800" alt=""> </router-link>

                </div>
                <div class="desc">
                    <div class="name">{{ item.data.goods.name }}</div>
                    <div class="lable"><span v-for="i in item.data.goods.labelGroup.abovePrice" :key="i.labelId"
                            :style="{ backgroundColor: i.attrs.bgColor, color: i.attrs.fontColor, height: i.attrs.height }">{{
                                i.name }}</span></div>
                    <div class="price"> ￥{{ item.data.goods.priceInfo.singlePrice.price / 100 }} <del class="old">￥{{
                        item.data.goods.priceInfo.marketPrice / 100 }}</del></div>
                </div>
            </div>
        </div>
        <div class="submit">
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" v-if="!edit">
                <van-checkbox v-model="checkeds" @click="checkAll">全选</van-checkbox>
            </van-submit-bar>
            <var-snackbar v-model:show="isShow">请添加商品！</var-snackbar>
            <van-submit-bar :price="totalPrice" button-text="删除" @submit="onDelete" v-if="edit">
                <van-checkbox v-model="checkeds" @click="checkAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { type CartRecommend, type cart } from '@/typings';
import { getCartRecommend } from '@/api/cart';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Snackbar } from '@varlet/ui'
import { useUserStore,SubmitOrder } from '@/stores/total';
const usersStore = useUserStore()
let flags = ref<boolean>(false);

const checked = ref<any>([]);
const checkboxGroup = ref<any>(null);
const isShow = ref(false)


let render = ref<Array<cart>>([])
render.value = usersStore.shopCar




const totalPrice = ref(0)

const handleChange = (index:number,value:number) => {
    usersStore.addCartNum(index,value)
    let ppp = 0
    if (checked.value) {
        for (let i = 0; i < checked.value.length; i++) {
            ppp += checked.value[i].number * checked.value[i].basePrice * 100
        }
    } else {
        ppp = 0

    }
    totalPrice.value = ppp

}
const checkAll = () => {


    if (checkboxGroup.value && !flags.value) {
        checkboxGroup.value.toggleAll(true);
        flags.value = true

    } else {
        checkboxGroup.value.toggleAll(false);
        flags.value = false
        checkeds.value = false
    }
    for (let i = 0; i < render.value.length; i++) {

        
        handleChange(i,render.value[i].number)
    }


}



const router = useRouter()
const recommendData = ref<CartRecommend>()
const onClickLeft = () => router.go(-1);
const edit = ref<boolean>(false)

const onClickRight = () => {
    edit.value = !edit.value
}
const checkeds = ref()
const getRecommend = async () => {
    let data = await getCartRecommend()
    recommendData.value = data

}

const select = () => {
    console.log(checked.value);
    // 检查所有单选框是否都被选中
    const allChecked = render.value!.every((item: cart) => checked.value.includes(item));

    if (allChecked) {
        flags.value = true
    } else {
        flags.value = false
    }
    // 更新全选框的选中状态
    checkeds.value = allChecked;
    // console.log(allChecked);
    for (let i = 0; i < render.value.length; i++) {

        
handleChange(i,render.value[i].number)
}

}
getRecommend()

const orderSub = SubmitOrder()
const onSubmit = () => {
    if(checked.value.length == 0){
        isShow.value = true
    }else{
        router.push('orders')
        orderSub.submit(checked.value)
      
    }
   
}




const onDelete = async () => {
usersStore.clearShopCar(checked.value)

    // actions[await Dialog('是否要删除')]();
}



</script>

<style scoped lang="scss">
.box {
    background-color: #f3f3f3;
    width: 100vw;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
    }
}

img {
    width: 100%;
}

.recommendList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 48vw;
        background-color: white;
        border-radius: 15px;
        margin: 20px 0;
        padding: 10px;
        box-sizing: border-box;

        .lable {
            display: flex;
            flex-wrap: wrap;

            span {
                display: block;
                font-size: 12px;
                border: 1px solid;
                margin: 5px 2px;
                border-radius: 5px;
            }
        }

        .price {
            color: rgba(0, 0, 0, 0.9);
            margin: 5px;

            .old {
                font-size: 12px;
                color: gray;
            }
        }
    }
}

.goods-card {
    background-color: white;
}
</style>